<!-- navbar.html -->

<!-- 搜索面板 -->
<div class="hidden z-50 fixed h-full w-full bg-gray-100" id="sm-search-box">
    <div class="search-bar flex items-center justify-between bg-white shadow-md p-4 mx-auto ">
        <button class="block p-2 " id="sm-search-return">
            <svg t="1747722656832" class="icon w-6 h-8" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5004" width="200" height="200">
                <path
                    d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
                    fill="" p-id="5005"></path>
            </svg>
        </button>

        <input type="text" placeholder="搜索商品..." id="sm-normal-search"
            class="p-2 flex-1 mx-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pkured" />

        <button class="block p-2" id="sm-begin-search" onclick="searchProducts()">
            <svg t="1747652398649" class="icon w-6 h-6" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5011">
                <path
                    d="M415.59889935 818.40673751c-103.69194019 0-207.38388041-39.48836529-286.31642412-118.42090898-157.86508737-157.87981634-157.86508737-414.78248979 0-572.66230613 157.85035841-157.85035841 414.76776082-157.90927428 572.64757719 0 157.86508737 157.87981634 157.86508737 414.78248979 0 572.66230613-78.93254368 78.93254368-182.63921287 118.42090898-286.33115307 118.42090898z m0-725.22496474c-82.09927197 0-164.21327292 31.25487175-226.70828746 93.74988629-125.00475803 125.00475803-125.00475803 328.44127481 0 453.44603281 125.01948701 124.9753001 328.41181686 125.03421596 453.43130386 0 125.00475803-125.00475803 125.00475803-328.44127481 0-453.44603281-62.5097435-62.49501453-144.60901547-93.74988627-226.7230164-93.74988629z"
                    fill="#2c2c2c" p-id="5012"></path>
                <path
                    d="M973.48804978 1013.69813456c-10.78160515 0-21.57793927-4.10938229-29.79670383-12.34287584L658.31757585 715.95203069c-16.46698708-16.46698708-16.46698708-43.14114955 0-59.60813666s43.14114955-16.46698708 59.60813665 0l285.37377009 285.38849908c16.46698708 16.46698708 16.46698708 43.14114955 0 59.60813663a42.07329932 42.07329932 0 0 1-29.81143281 12.35760482z"
                    fill="#2c2c2c" p-id="5013"></path>
            </svg>
        </button>
    </div>
    <div class="m-4 text-[1rem] text-left text-gray-500">
        搜索历史
    </div>
    <div class="mt-4 mx-auto z-50 text-[1rem]">
        <div class="flex mx-3 gap-4 flex-wrap" id="sm-search-history-list">
            <!--- 历史记录 -->
        </div>
    </div>
</div>

<header class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center" style="padding: 15px !important;">
        <h1 style="padding: 0px !important; margin: 0px !important; font-size: 1.25rem !important;"><a
                class="text-xl font-bold text-pkured" href="/">PKU跳蚤市场</a></h1>

        <!-- 桌面版搜索框 -->
        <div class="hidden sm:flex max-w-xl mx-auto px-8 flex-1 relative flex-col">
            <div>
                <input type="text" placeholder="搜索商品..." id="normal-search"
                    class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pkured" />
                <button class="block absolute right-8 top-0 p-2" onclick="searchProducts()">
                    <svg t="1747652398649" class="icon w-6 h-6" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5011">
                        <path
                            d="M415.59889935 818.40673751c-103.69194019 0-207.38388041-39.48836529-286.31642412-118.42090898-157.86508737-157.87981634-157.86508737-414.78248979 0-572.66230613 157.85035841-157.85035841 414.76776082-157.90927428 572.64757719 0 157.86508737 157.87981634 157.86508737 414.78248979 0 572.66230613-78.93254368 78.93254368-182.63921287 118.42090898-286.33115307 118.42090898z m0-725.22496474c-82.09927197 0-164.21327292 31.25487175-226.70828746 93.74988629-125.00475803 125.00475803-125.00475803 328.44127481 0 453.44603281 125.01948701 124.9753001 328.41181686 125.03421596 453.43130386 0 125.00475803-125.00475803 125.00475803-328.44127481 0-453.44603281-62.5097435-62.49501453-144.60901547-93.74988627-226.7230164-93.74988629z"
                            fill="#2c2c2c" p-id="5012"></path>
                        <path
                            d="M973.48804978 1013.69813456c-10.78160515 0-21.57793927-4.10938229-29.79670383-12.34287584L658.31757585 715.95203069c-16.46698708-16.46698708-16.46698708-43.14114955 0-59.60813666s43.14114955-16.46698708 59.60813665 0l285.37377009 285.38849908c16.46698708 16.46698708 16.46698708 43.14114955 0 59.60813663a42.07329932 42.07329932 0 0 1-29.81143281 12.35760482z"
                            fill="#2c2c2c" p-id="5013"></path>
                    </svg>
                </button>
            </div>
            <div id="search-history" class="absolute top-12 left-0 w-full mt-2 mx-auto px-4 hidden text-center z-50">
                <div class="bg-white shadow-lg rounded-lg" id="search-history-list">
                    <!--历史搜索记录-->
                </div>
            </div>
        </div>

        <!-- 桌面导航菜单 -->
        <nav class="hidden md:flex space-x-6 justify-between items-center">
            <a href="/profile.html" class="hover:text-pkured text-black">个人资料</a>
            <a href="/profile.html?section=published" class="hover:text-pkured text-black">我的发布</a>
            <a href="/profile.html?section=favorites" class="hover:text-pkured text-black">我的收藏</a>
            <button class="hover:text-pkured text-black" onclick="logout()">登出</button>
        </nav>

        <!-- 移动端菜单 -->
        <div class="flex md:hidden items-center w-15 justify-between">
            <button class="sm:hidden p-1" id="sm-search-btn">
                <svg t="1747652398649" class="icon w-6 h-6" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5011">
                    <path
                        d="M415.59889935 818.40673751c-103.69194019 0-207.38388041-39.48836529-286.31642412-118.42090898-157.86508737-157.87981634-157.86508737-414.78248979 0-572.66230613 157.85035841-157.85035841 414.76776082-157.90927428 572.64757719 0 157.86508737 157.87981634 157.86508737 414.78248979 0 572.66230613-78.93254368 78.93254368-182.63921287 118.42090898-286.33115307 118.42090898z m0-725.22496474c-82.09927197 0-164.21327292 31.25487175-226.70828746 93.74988629-125.00475803 125.00475803-125.00475803 328.44127481 0 453.44603281 125.01948701 124.9753001 328.41181686 125.03421596 453.43130386 0 125.00475803-125.00475803 125.00475803-328.44127481 0-453.44603281-62.5097435-62.49501453-144.60901547-93.74988627-226.7230164-93.74988629z"
                        fill="#2c2c2c" p-id="5012"></path>
                    <path
                        d="M973.48804978 1013.69813456c-10.78160515 0-21.57793927-4.10938229-29.79670383-12.34287584L658.31757585 715.95203069c-16.46698708-16.46698708-16.46698708-43.14114955 0-59.60813666s43.14114955-16.46698708 59.60813665 0l285.37377009 285.38849908c16.46698708 16.46698708 16.46698708 43.14114955 0 59.60813663a42.07329932 42.07329932 0 0 1-29.81143281 12.35760482z"
                        fill="#2c2c2c" p-id="5013"></path>
                </svg>
            </button>
            <div class="relative flex flex-col items-center" id="user-menu">
                <button class="md:hidden text-gray-600 p-1">
                    <svg t="1747653580225" class="icon w-8 h-8" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6843" width="200" height="200">
                        <path
                            d="M92 725c0-9 6-15 15-15h810c9 0 15 6 15 15v90c0 9-6 15-15 15h-810c-9 0-15-6-15-15v-90zM92 209c0-9 6-15 15-15h810c9 0 15 6 15 15v90c0 9-6 15-15 15h-810c-9 0-15-6-15-15v-90z m0 258c0-9 6-15 15-15h810c9 0 15 6 15 15v90c0 9-6 15-15 15h-810c-9 0-15-6-15-15v-90z"
                            fill="#6D6D6D" p-id="6844"></path>
                    </svg>
                </button>

                <div class="absolute top-8 right-0 sm:right-auto w-28 bg-white shadow-lg rounded-lg mt-2 hidden text-center z-50"
                    id="menu">
                    <a href="/profile.html" class="block px-4 py-2 hover:bg-gray-100 text-black">个人资料</a>
                    <a href="/profile.html?section=published"
                        class="block px-4 py-2 hover:bg-gray-100 text-black">我的发布</a>
                    <a href="/profile.html?section=favorites"
                        class="block px-4 py-2 hover:bg-gray-100 text-black">我的收藏</a>
                    <button class="block px-4 py-2 hover:bg-gray-100 w-full text-black" onclick="logout()">登出</button>
                </div>
            </div>
        </div>
    </div>
</header>

<script>
    // 导航栏专用脚本
    function loadNavbar() {
        console.log("loadNavbar");
        // 菜单切换逻辑
        $('#user-menu').click(() => $('#menu').toggle());
        $('#sm-search-btn').click(() => $('#sm-search-box').toggleClass('hidden block'));
        $('#sm-search-return, #sm-begin-search').click(() => $('#sm-search-box').toggleClass('hidden block'));
    }

    function searchProducts() {
        const smBreakpoint = 640; // Tailwind 的 sm 断点
        let keyword;
        if (window.innerWidth <= smBreakpoint) {
            keyword = document.getElementById('sm-normal-search').value.trim();
        } else {
            keyword = document.getElementById('normal-search').value.trim();
        }
        window.location.href = "/products.html?search=" + keyword;
    }

    // 页面加载完成后初始化
    $(document).ready(loadNavbar);

    // 页面加载完成后初始化搜索框
    // 监听搜索输入
    document.getElementById('normal-search').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            searchProducts();
        }
    });

    // 监听搜索输入
    document.getElementById('sm-normal-search').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            searchProducts();
        }
    });
</script>